<template>
	<view class="content" >
		<view class="top"></view>
		<view class="banner">
			<dl>
				<dt><image src="../../static/img/common/logo.jpg" mode=""></image></dt>
				<dd>{{names}}</dd>
			</dl>
			<view class="img">
				<image :src="code_url" mode=""></image>
			</view>
			<view class="has-pdt-15 is-center">
				<view class="is-center is-size-25 is-blue">
					邀请码
				</view>
				<view class="is-center">
					<view class="has-pd-10 is-bg-blue is-white is-size-20 is-letter-12 ">
						<text class="share-code is-center">{{user_code}}</text>
					</view>
				</view>
			</view>
			<view class="tgtit has-pdt-15">推广链接
			<rich-text :nodes="agent_url" selectable="True" class="tugurl"></rich-text></view>
			<view class="sharbuttn">
				<view class="btn" @click="savecode">保存二维码</view>
				<view class="btn" @click="sharurl">复制推广链接</view>
			</view>
			
		</view>
		<view class="has-mgt-20">
			<view class="is-size-18 has-pdb-10 has-pdl-6">
				<text>业绩返佣</text>
			</view>
			<t-table @change="change">
			    <t-tr class="has-bg-white">
			        <t-th>阶梯</t-th>
			        <t-th>业绩流水（万）</t-th>
			        <t-th>返点（每一万业绩）</t-th>
			        <t-th>佣金（￥）</t-th>
			    </t-tr>
			    <t-tr v-for="item in tableList" :key="item.id">
			        <t-td>{{ item.order }}</t-td>
			        <t-td>{{ item.order_num }}</t-td>
			        <t-td>{{ item.order_rebate }}</t-td>
			        <t-td>{{ item.rebate_num }}</t-td>
			    </t-tr>
			</t-table>
		</view>
		<!-- 底部导航 -->
		<view class="is-foot bg-f footmemu is-center">
			<view class="is-col-6 has-pdtb-10" @tap = "closeorder">
				<text>首页</text>
			</view>
			<view class="is-col-6 has-pdtb-10" @tap = "toorder">
				<text>接单</text>
			</view>
			<view class="is-col-6 has-pdtb-10">
				<text class="is-red">邀请赚钱</text>
			</view>
			<view class="is-col-6 has-pdtb-10" @tap="gohome">
				<text>我的</text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view>
			<show-modal></show-modal>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';

	var _self;
	export default {
	    components: {
	        tTable,
	        tTh,
	        tTr,
	        tTd,
	    },
		data(){
			return {
				providerList:[],				
				sourceLink: '',		
				type:0,
				foxtoken:'',
				user_key:'',
				agent_url:'',
				userinfo:[],
				code_url:'',
				dcode_url:'',
				foxtel:'',
				tableList: [],
				names:'',
				user_code:''
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.version = plus.runtime.version;
			// #endif
			this.names = this.service.FOX_NAME;
			let info = this.service.getfox();
			if(info[0]){
				this.foxtoken = info[0]['foxtoken'];
				let user_tel = info[0]['foxtel'];
				this.foxtel = user_tel;
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_userinfo_agent',
					method:'POST',
					data: {
						user_key: this.foxtoken
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						// var rest = JSON.stringify(res);
						// console.log(res)
						var rest = res.data;
						if(rest.status == 'success'){
							this.userinfo = rest.msg;
							this.agent_url = this.userinfo['agent_url'];
							this.sourceLink = this.userinfo['agent_url'];
							this.code_url = this.userinfo['code_url'];
							this.dcode_url = this.userinfo['dcode_url'];
							this.user_code = this.userinfo['user_code'];
						}
					}
				})
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_rebate',
					method:'POST',
					data: {
						user_tel: user_tel
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						var rest = res.data;
						if(rest.code == '200'){
							if(rest.data.list){
								this.tableList = rest.data.list;
							}
						}
					}
				})
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			uni.getProvider({
				service: 'share',
				success: (e) => {
					let data = [];
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin'
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type: 'WXSenceTimeline'
								})
								break;
							case 'qq':
								data.push({
									name: '分享到QQ',
									id: 'qq'
								})
								break;
							default:
								break;
						}
					}
					this.providerList = data;
				},
				fail: (e) => {
					console.log('获取登录通道失败'+ JSON.stringify(e));
				}
			});
		},
		methods:{
			
			change(e) {
			    console.log(e.detail);
			},
			//复制分享链接
			sharurl(){
				uni.setClipboardData({
					data: this.agent_url,
					success: function () {
						console.log('success');
						this.$showModal({
							title: '复制成功',
							content: '内容已复制到粘贴板，可前往其他应用粘贴查看。', 
							showCancel:false,
							success: function(res) {
								if (res.confirm) {											 
									//console.log('用户点击确定');
								} else if (res.cancel) {
									//console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			//保存图片到相册
			savecode(){
				if(this.dcode_url.length > 0){
					uni.showActionSheet({
						itemList:['保存图片到相册'],
						success: () => {
							plus.gallery.save(this.dcode_url, function() {
								uni.showToast({
									title:'保存成功',
									icon:'none'
								})
							}, function() {
								uni.showToast({
									title:'保存失败，请重试！',
									icon:'none'
								})
							});
						}
					})
				}else{
					this.$showModal({
						title: '没有找到图片!',
						showCancel: false
					})
				}
				
			},
			share(e) {
				if (this.providerList.length === 0) {
					this.$showModal({
						title: '当前环境无分享渠道!',
						showCancel: false
					})
					return;
				}
				let itemList = this.providerList.map(function (value) {
					return value.name
				})
				 
				console.log(itemList)
				
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						console.log(this.providerList[res.tapIndex].id)
						if(this.providerList[res.tapIndex].id=='qq'){
							this.type=1
						}else{
							this.type=0
						}
						 uni.share({
						 	provider: this.providerList[res.tapIndex].id,
						 	scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
						 	type: this.type,
						 	title:this.names,
						 	summary: '月入百万，躺着赚钱',
						 	imageUrl:this.code_url,
						 	href:this.agent_url,
						 	success: (res) => {
						 		console.log("success:" + JSON.stringify(res));
						 	},
						 	fail: (e) => {
						 		this.$showModal({
						 			content: e.errMsg,
						 			showCancel:false
						 		})
						 	}
						 });
					}
				})
				
				
				
			 
			},
			openLink() {
				plus.runtime.openWeb(this.sourceLink)
			},
			toorder(){
				uni.reLaunch({
					url:'/pages/index/orderline'
				})
			},
			closeorder(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			gohome(){
				uni.reLaunch({
					url:'/pages/member/homes'
				})
			}
		}
	}
	
	
</script>

<style>
	.tugurl{
		color: #999;
	}
	.sharbuttn{
		display: flex;
		justify-content: center;
	}
	.shartitle{
		    width: 80%;
			text-align: center;
			margin-left: 10%;
			border-bottom: 1px solid #dddddd;
			position: relative;
			height: 60upx;
	}
	.tgtit{
		text-align: center;
	}
	.shartitle view{
		    height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			color: #999;
			width: 120upx;
			margin: 32upx auto;
			position: absolute;
			background: #fff;
			left: 50%;
			margin-left: -60upx;
	}
	.sharapk{
	 display: flex;
	 justify-content: center;
	 margin: 20upx auto
	}
	.sharapk view{
		margin: 40upx;
	}
	.sharapk view image{
		height: 80upx;
		width: 80upx;
	}
	.content{
		width: 100%;
		background-color: #ffffff;
	}
	.top{
		width: 100%;
		height:100upx;
		background: #0084FF ;
		background-size:100% ;
		background-position:center center;
	}
	.banner{
		width: 100% ;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}
	.banner dl{
		margin-top: -10upx;
	}
	.banner dl dt{
		text-align: center;
	}
	.banner dl dt image{
		width: 160upx;
		height: 160upx;
		border-radius:50% ;
	}
	.banner dl dd{
		text-align: center;
	}
	.img{
		width: 400upx;
		height: 400upx;
		background-color: #0E80D2;
		margin: 0 auto;
	}
	.img image{
		width: 100%;
		height: 100%;
	}
	.btn{
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom{
		width: 100%;
		height: 400upx;
		background-position:left bottom;/* 设置背景图片位置 */
		background-size: 20%;
	}
	.bottom ul{
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.bottom ul li{
		width: 100%;
		height: 60upx;
	}
	.share-code{border-radius: 8upx;text-align: center;padding-left: 20upx;}
</style>
